<!--
  成绩单列表页面
-->
<template>
  <div class="grade-sheet-list">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1>成绩管理</h1>
        <p>管理和分析考试成绩</p>
      </div>
      <div class="header-right">
        <el-button
          type="primary"
          :icon="Plus"
          @click="createGradeSheet"
          v-if="authStore.hasPermission('grading:write')"
        >
          创建成绩单
        </el-button>
        <el-button
          :icon="TrendCharts"
          @click="showAnalysisDialog = true"
        >
          成绩分析
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon total">
              <el-icon size="24"><DataLine /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.total_sheets }}</div>
              <div class="stat-label">总成绩单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon published">
              <el-icon size="24"><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.published_sheets }}</div>
              <div class="stat-label">已发布</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon pending">
              <el-icon size="24"><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.pending_sheets }}</div>
              <div class="stat-label">待审核</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon appeals">
              <el-icon size="24"><Bell /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stats.appeals_count }}</div>
              <div class="stat-label">申诉数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 筛选和搜索 -->
    <el-card class="filter-card">
      <el-form :model="filterForm" :inline="true">
        <el-form-item label="成绩单名称">
          <el-input
            v-model="filterForm.keyword"
            placeholder="搜索成绩单名称"
            clearable
            style="width: 200px"
            @keyup.enter="loadGradeSheets"
          />
        </el-form-item>
        <el-form-item label="考试">
          <el-select
            v-model="filterForm.examination"
            placeholder="选择考试"
            clearable
            filterable
            style="width: 200px"
          >
            <el-option
              v-for="exam in examinations"
              :key="exam.id"
              :label="exam.title"
              :value="exam.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="filterForm.status"
            placeholder="选择状态"
            clearable
            style="width: 120px"
          >
            <el-option label="全部" value="" />
            <el-option label="草稿" value="draft" />
            <el-option label="已审核" value="reviewed" />
            <el-option label="已发布" value="published" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="filterForm.date_range"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadGradeSheets">
            搜索
          </el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 成绩单列表 -->
    <el-card class="sheet-table-card">
      <div class="table-header">
        <div class="header-left">
          <span class="table-title">成绩单列表</span>
          <span class="table-info">
            共 {{ total }} 个成绩单
          </span>
        </div>
        <div class="header-right">
          <el-button
            :icon="Download"
            @click="exportGradeSheets"
            :disabled="gradeSheets.length === 0"
          >
            批量导出
          </el-button>
          <el-dropdown @command="handleBatchAction" v-if="selectedSheets.length > 0">
            <el-button>
              批量操作 ({{ selectedSheets.length }})<el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="publish">批量发布</el-dropdown-item>
                <el-dropdown-item command="review">批量审核</el-dropdown-item>
                <el-dropdown-item command="delete" divided>批量删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <el-table
        :data="gradeSheets"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="成绩单名称" min-width="200" sortable="custom">
          <template #default="{ row }">
            <div class="sheet-name">
              <el-link type="primary" @click="viewSheetDetail(row)">
                {{ row.name }}
              </el-link>
              <div class="sheet-exam">{{ row.examination_title }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="考试信息" width="200">
          <template #default="{ row }">
            <div class="exam-info">
              <div class="exam-date">{{ formatDate(row.exam_date) }}</div>
              <div class="exam-stats">
                <span>{{ row.total_students || 0 }} 人参考</span>
                <span>{{ row.submitted_count || 0 }} 人提交</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="成绩统计" width="180">
          <template #default="{ row }">
            <div class="grade-stats">
              <div class="stat-item">
                <span class="stat-label">平均分</span>
                <span class="stat-value">{{ row.average_score || '--' }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">及格率</span>
                <span class="stat-value">{{ row.pass_rate || '--' }}%</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="100" sortable="custom">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建者" width="120">
          <template #default="{ row }">
            {{ row.creator_name }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" width="120" sortable="custom">
          <template #default="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button
                text
                type="primary"
                size="small"
                @click="viewSheetDetail(row)"
              >
                详情
              </el-button>
              <el-button
                v-if="canEditSheet(row)"
                text
                size="small"
                @click="editSheet(row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="canReviewSheet(row)"
                text
                size="small"
                @click="reviewSheet(row)"
              >
                审核
              </el-button>
              <el-button
                v-if="canPublishSheet(row)"
                text
                size="small"
                type="success"
                @click="publishSheet(row)"
              >
                发布
              </el-button>
              <el-dropdown trigger="click" @command="(command) => handleSheetAction(command, row)">
                <el-button text size="small">
                  更多<el-icon><ArrowDown /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="calculate">
                      <el-icon><Refresh /></el-icon>
                      重新计算
                    </el-dropdown-item>
                    <el-dropdown-item command="export">
                      <el-icon><Download /></el-icon>
                      导出成绩
                    </el-dropdown-item>
                    <el-dropdown-item command="report">
                      <el-icon><Document /></el-icon>
                      生成报告
                    </el-dropdown-item>
                    <el-dropdown-item
                      command="delete"
                      divided
                      v-if="canDeleteSheet(row)"
                    >
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper" v-if="total > 0">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.page_size"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="loadGradeSheets"
          @current-change="loadGradeSheets"
        />
      </div>
    </el-card>

    <!-- 创建成绩单对话框 -->
    <el-dialog
      v-model="showCreateDialog"
      title="创建成绩单"
      width="600px"
      @close="resetCreateForm"
    >
      <el-form
        ref="createFormRef"
        :model="createForm"
        :rules="createRules"
        label-width="100px"
      >
        <el-form-item label="成绩单名称" prop="name">
          <el-input
            v-model="createForm.name"
            placeholder="请输入成绩单名称"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="选择考试" prop="examination">
          <el-select
            v-model="createForm.examination"
            placeholder="请选择考试"
            style="width: 100%"
            filterable
          >
            <el-option
              v-for="exam in examinations"
              :key="exam.id"
              :label="exam.title"
              :value="exam.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="满分" prop="total_score">
          <el-input-number
            v-model="createForm.total_score"
            :min="1"
            :max="1000"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="及格分" prop="passing_score">
          <el-input-number
            v-model="createForm.passing_score"
            :min="0"
            :max="createForm.total_score"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="说明">
          <el-input
            v-model="createForm.description"
            type="textarea"
            placeholder="请输入说明（可选）"
            :rows="3"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button
          type="primary"
          :loading="createLoading"
          @click="confirmCreate"
        >
          创建
        </el-button>
      </template>
    </el-dialog>

    <!-- 成绩分析对话框 -->
    <el-dialog
      v-model="showAnalysisDialog"
      title="成绩分析"
      width="800px"
    >
      <div class="analysis-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <h4>成绩分布</h4>
              <div id="scoreChart" style="height: 300px"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <h4>班级对比</h4>
              <div id="classChart" style="height: 300px"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { useAuthStore } from '@/stores'
import {
  getGradeSheets,
  createGradeSheet,
  updateGradeSheet,
  deleteGradeSheet,
  publishGradeSheet,
  reviewGradeSheet,
  calculateGrades
} from '@/api/grading'
import { getExaminations } from '@/api/examinations'
import type { GradeSheet } from '@/types'
import {
  Plus,
  TrendCharts,
  DataLine,
  Check,
  Clock,
  Bell,
  Download,
  ArrowDown,
  Refresh,
  Document,
  Delete
} from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

// 响应式数据
const loading = ref(false)
const gradeSheets = ref<GradeSheet[]>([])
const examinations = ref<any[]>([])
const selectedSheets = ref<GradeSheet[]>([])
const total = ref(0)

// 统计数据
const stats = reactive({
  total_sheets: 0,
  published_sheets: 0,
  pending_sheets: 0,
  appeals_count: 0
})

// 筛选表单
const filterForm = reactive({
  keyword: '',
  examination: '',
  status: '',
  date_range: [] as Date[]
})

// 分页和排序
const pagination = reactive({
  page: 1,
  page_size: 20
})
const sortField = ref('')
const sortOrder = ref('')

// 创建成绩单
const showCreateDialog = ref(false)
const createLoading = ref(false)
const createFormRef = ref<FormInstance>()

const createForm = reactive({
  name: '',
  examination: '',
  total_score: 100,
  passing_score: 60,
  description: ''
})

const createRules: FormRules = {
  name: [
    { required: true, message: '请输入成绩单名称', trigger: 'blur' },
    { min: 2, max: 50, message: '名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  examination: [
    { required: true, message: '请选择考试', trigger: 'change' }
  ],
  total_score: [
    { required: true, message: '请设置满分', trigger: 'change' }
  ],
  passing_score: [
    { required: true, message: '请设置及格分', trigger: 'change' }
  ]
}

// 成绩分析
const showAnalysisDialog = ref(false)

// 加载成绩单列表
const loadGradeSheets = async () => {
  loading.value = true
  try {
    const params: any = {
      page: pagination.page,
      page_size: pagination.page_size,
      search: filterForm.keyword || undefined,
      examination: filterForm.examination || undefined,
      status: filterForm.status || undefined
    }

    if (filterForm.date_range && filterForm.date_range.length === 2) {
      params.start_date = filterForm.date_range[0].toISOString()
      params.end_date = filterForm.date_range[1].toISOString()
    }

    if (sortField.value) {
      params.ordering = sortOrder.value === 'ascending'
        ? sortField.value
        : `-${sortField.value}`
    }

    const response = await getGradeSheets(params)
    gradeSheets.value = response.data.results
    total.value = response.data.count

    // 更新统计数据
    updateStats()
  } catch (error) {
    console.error('Failed to load grade sheets:', error)
    ElMessage.error('加载成绩单失败')
  } finally {
    loading.value = false
  }
}

// 加载考试列表
const loadExaminations = async () => {
  try {
    const response = await getExaminations({ page_size: 100 })
    examinations.value = response.data.results
  } catch (error) {
    console.error('Failed to load examinations:', error)
  }
}

// 更新统计数据
const updateStats = () => {
  stats.total_sheets = gradeSheets.value.length
  stats.published_sheets = gradeSheets.value.filter(s => s.status === 'published').length
  stats.pending_sheets = gradeSheets.value.filter(s => s.status === 'reviewed').length
  stats.appeals_count = gradeSheets.value.reduce((total, sheet) => {
    return total + (sheet.appeals_count || 0)
  }, 0)
}

// 重置筛选
const resetFilter = () => {
  Object.assign(filterForm, {
    keyword: '',
    examination: '',
    status: '',
    date_range: []
  })
  pagination.page = 1
  loadGradeSheets()
}

// 处理选择变化
const handleSelectionChange = (selection: GradeSheet[]) => {
  selectedSheets.value = selection
}

// 处理排序变化
const handleSortChange = ({ prop, order }: any) => {
  sortField.value = prop || ''
  sortOrder.value = order || ''
  loadGradeSheets()
}

// 查看成绩单详情
const viewSheetDetail = (sheet: GradeSheet) => {
  router.push(`/grading/sheets/${sheet.id}`)
}

// 创建成绩单
const createGradeSheet = () => {
  showCreateDialog.value = true
}

// 编辑成绩单
const editSheet = (sheet: GradeSheet) => {
  router.push(`/grading/sheets/${sheet.id}/edit`)
}

// 审核成绩单
const reviewSheet = async (sheet: GradeSheet) => {
  try {
    await reviewGradeSheet(sheet.id, { status: 'reviewed', review_notes: '审核通过' })
    ElMessage.success('审核成功')
    loadGradeSheets()
  } catch (error) {
    console.error('Failed to review sheet:', error)
    ElMessage.error('审核失败')
  }
}

// 发布成绩单
const publishSheet = async (sheet: GradeSheet) => {
  try {
    await publishGradeSheet(sheet.id)
    ElMessage.success('发布成功')
    loadGradeSheets()
  } catch (error) {
    console.error('Failed to publish sheet:', error)
    ElMessage.error('发布失败')
  }
}

// 确认创建成绩单
const confirmCreate = async () => {
  if (!createFormRef.value) return

  try {
    await createFormRef.value.validate()
    createLoading.value = true

    await createGradeSheet(createForm)
    ElMessage.success('成绩单创建成功')
    showCreateDialog.value = false
    loadGradeSheets()
  } catch (error) {
    console.error('Failed to create grade sheet:', error)
    ElMessage.error('创建失败')
  } finally {
    createLoading.value = false
  }
}

// 重置创建表单
const resetCreateForm = () => {
  Object.assign(createForm, {
    name: '',
    examination: '',
    total_score: 100,
    passing_score: 60,
    description: ''
  })
  createFormRef.value?.clearValidate()
}

// 处理批量操作
const handleBatchAction = async (command: string) => {
  switch (command) {
    case 'publish':
      await batchPublishSheets()
      break
    case 'review':
      await batchReviewSheets()
      break
    case 'delete':
      await batchDeleteSheets()
      break
  }
}

// 处理单个成绩单操作
const handleSheetAction = async (command: string, sheet: GradeSheet) => {
  switch (command) {
    case 'calculate':
      await calculateSheet(sheet)
      break
    case 'export':
      await exportSheet(sheet)
      break
    case 'report':
      await generateReport(sheet)
      break
    case 'delete':
      await deleteSheet(sheet)
      break
  }
}

// 批量发布
const batchPublishSheets = async () => {
  try {
    const promises = selectedSheets.value.map(sheet => publishGradeSheet(sheet.id))
    await Promise.all(promises)
    ElMessage.success(`成功发布 ${selectedSheets.value.length} 个成绩单`)
    selectedSheets.value = []
    loadGradeSheets()
  } catch (error) {
    console.error('Failed to batch publish:', error)
    ElMessage.error('批量发布失败')
  }
}

// 批量审核
const batchReviewSheets = async () => {
  try {
    const promises = selectedSheets.value.map(sheet =>
      reviewGradeSheet(sheet.id, { status: 'reviewed', review_notes: '批量审核通过' })
    )
    await Promise.all(promises)
    ElMessage.success(`成功审核 ${selectedSheets.value.length} 个成绩单`)
    selectedSheets.value = []
    loadGradeSheets()
  } catch (error) {
    console.error('Failed to batch review:', error)
    ElMessage.error('批量审核失败')
  }
}

// 批量删除
const batchDeleteSheets = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedSheets.value.length} 个成绩单吗？此操作不可恢复！`,
      '确认删除',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const promises = selectedSheets.value.map(sheet => deleteGradeSheet(sheet.id))
    await Promise.all(promises)
    ElMessage.success(`成功删除 ${selectedSheets.value.length} 个成绩单`)
    selectedSheets.value = []
    loadGradeSheets()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Failed to batch delete:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 计算成绩
const calculateSheet = async (sheet: GradeSheet) => {
  try {
    await calculateGrades(sheet.id)
    ElMessage.success('重新计算成功')
    loadGradeSheets()
  } catch (error) {
    console.error('Failed to calculate:', error)
    ElMessage.error('计算失败')
  }
}

// 导出成绩
const exportSheet = async (sheet: GradeSheet) => {
  try {
    // TODO: 实现导出功能
    ElMessage.info('导出功能开发中...')
  } catch (error) {
    ElMessage.error('导出失败')
  }
}

// 生成报告
const generateReport = async (sheet: GradeSheet) => {
  try {
    // TODO: 实现报告生成功能
    ElMessage.info('报告生成功能开发中...')
  } catch (error) {
    ElMessage.error('报告生成失败')
  }
}

// 删除成绩单
const deleteSheet = async (sheet: GradeSheet) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除成绩单 "${sheet.name}" 吗？此操作不可恢复！`,
      '确认删除',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await deleteGradeSheet(sheet.id)
    ElMessage.success('删除成功')
    loadGradeSheets()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('Failed to delete sheet:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 批量导出
const exportGradeSheets = () => {
  ElMessage.info('批量导出功能开发中...')
}

// 权限检查
const canEditSheet = (sheet: GradeSheet) => {
  return authStore.hasPermission('grading:write') &&
         ['draft', 'reviewed'].includes(sheet.status) &&
         (sheet.creator === authStore.user?.id || authStore.hasRole('admin'))
}

const canReviewSheet = (sheet: GradeSheet) => {
  return authStore.hasPermission('grading:write') &&
         sheet.status === 'draft' &&
         (sheet.creator === authStore.user?.id || authStore.hasRole('admin'))
}

const canPublishSheet = (sheet: GradeSheet) => {
  return authStore.hasPermission('grading:write') &&
         sheet.status === 'reviewed' &&
         (sheet.creator === authStore.user?.id || authStore.hasRole('admin'))
}

const canDeleteSheet = (sheet: GradeSheet) => {
  return authStore.hasPermission('grading:delete') &&
         !['published'].includes(sheet.status) &&
         (sheet.creator === authStore.user?.id || authStore.hasRole('admin'))
}

// 工具函数
const formatDate = (dateString?: string) => {
  return dateString ? new Date(dateString).toLocaleDateString() : ''
}

const getStatusType = (status: string) => {
  const types: Record<string, string> = {
    draft: 'info',
    reviewed: 'warning',
    published: 'success'
  }
  return types[status] || 'info'
}

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    draft: '草稿',
    reviewed: '已审核',
    published: '已发布'
  }
  return texts[status] || status
}

// 页面挂载时加载数据
onMounted(async () => {
  await Promise.all([
    loadGradeSheets(),
    loadExaminations()
  ])
})
</script>

<style scoped lang="scss">
.grade-sheet-list {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;

    .header-left {
      h1 {
        font-size: 28px;
        color: var(--el-text-color-primary);
        margin: 0 0 8px 0;
      }

      p {
        font-size: 14px;
        color: var(--el-text-color-regular);
        margin: 0;
      }
    }

    .header-right {
      display: flex;
      gap: 12px;
    }
  }

  .stats-row {
    margin-bottom: 24px;

    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;

        .stat-icon {
          width: 48px;
          height: 48px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;

          &.total {
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
          }

          &.published {
            background: var(--el-color-success-light-9);
            color: var(--el-color-success);
          }

          &.pending {
            background: var(--el-color-warning-light-9);
            color: var(--el-color-warning);
          }

          &.appeals {
            background: var(--el-color-danger-light-9);
            color: var(--el-color-danger);
          }
        }

        .stat-info {
          .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: var(--el-text-color-primary);
            margin-bottom: 4px;
          }

          .stat-label {
            font-size: 14px;
            color: var(--el-text-color-regular);
          }
        }
      }
    }
  }

  .filter-card {
    margin-bottom: 24px;
  }

  .sheet-table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .header-left {
        .table-title {
          font-size: 18px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin-right: 12px;
        }

        .table-info {
          font-size: 14px;
          color: var(--el-text-color-regular);
        }
      }
    }

    .sheet-name {
      .sheet-exam {
        font-size: 12px;
        color: var(--el-text-color-regular);
        margin-top: 4px;
      }
    }

    .exam-info {
      .exam-date {
        font-size: 14px;
        color: var(--el-text-color-primary);
        margin-bottom: 4px;
      }

      .exam-stats {
        font-size: 12px;
        color: var(--el-text-color-regular);
        display: flex;
        gap: 12px;
      }
    }

    .grade-stats {
      .stat-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;

        .stat-label {
          font-size: 12px;
          color: var(--el-text-color-regular);
        }

        .stat-value {
          font-size: 12px;
          font-weight: 500;
          color: var(--el-text-color-primary);
        }
      }
    }

    .action-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }
  }

  .analysis-content {
    .el-card {
      h4 {
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin: 0 0 16px 0;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .grade-sheet-list {
    .page-header {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;

      .header-right {
        justify-content: flex-start;
      }
    }

    .stats-row {
      .stat-card .stat-content {
        .stat-icon {
          width: 40px;
          height: 40px;
        }

        .stat-info .stat-value {
          font-size: 20px;
        }
      }
    }

    .sheet-table-card {
      .table-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;

        .header-right {
          justify-content: flex-start;
        }
      }

      .action-buttons {
        flex-direction: column;
        align-items: stretch;
      }
    }
  }
}
</style>